import 'package:flutter/material.dart';

// separated 构造函数
// 场景: 可以很容易设置分割线,也适用于列表子组件比较多,而且子组件样式都一样的情况
class ListViewSeparatedWidget extends StatelessWidget {
  const ListViewSeparatedWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('案例-ListViewSeparated方式创建列表'),
        backgroundColor: Colors.amber,
      ),
      body: ListView.separated(
        itemBuilder: (BuildContext context, int index) {
          return Container(
            height: 150,
            color: Colors.lightBlue,
            child: Padding(
              padding: const EdgeInsets.all(10),
              child: Row(
                children: [
                  Image.network(
                    'https://yanxuan-item.nosdn.127.net/e529b6ab111ade9da9314867f98d360f.png',
                    width: 90,
                  ),
                  const Expanded(
                    child: Padding(
                      padding: EdgeInsets.only(left: 10),
                      child: Text(
                        '海尔（Haier）波轮洗衣机全自动家用 10公斤大容量 直驱变频 一级能效 高效精华洗 以旧换新EB100B37Mate5',
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ),
                  const Padding(
                    padding: EdgeInsets.only(left: 10),
                    child: Icon(Icons.access_time_filled),
                  ),
                ],
              ),
            ),
          );
        },
        separatorBuilder: (BuildContext context, int index) {
          return Container(
            margin: const EdgeInsets.only(left: 10, right: 10),
            height: 1,
            color: const Color.fromARGB(0, 210, 209, 209),
          );
        },
        itemCount: 30,
      ),
    );
  }
}
